<template>
	<view>
		<view v-if="list.length!=0">
			<view class="order" v-for="(item,i) in list" :key="item.id">
				<view class="top">
					<view class="left">
						<!-- <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
					<view class="store">111</view>
					<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon> -->
					</view>
					<view class="right" v-if="item.status==0">立即付款</view>
					<view class="right" v-if="item.status==1">待发货</view>
					<view class="right" v-if="item.status==2">已发货</view>
					<view class="right" v-if="item.status==3">已完成</view>
					<view class="right" v-if="item.status==4">已关闭</view>
				</view>
				<view class="item" v-for="items in item.orderItemList" :key="items.id" @click="to(item.id)">
					<view class="left">
						<image :src="items.productPic" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="title u-line-2">{{items.productName}}</view>
						<view class="type"><text v-for="(attr,j) in items.productAttrArray" :key="j">{{attr.value}}{{item.productAttrArray.length-1>j?',':''}}</text></view>
						<view class="delivery-time">发货时间 付款后30天内发货</view>
					</view>
					<view class="right">
						<view class="price">
							<!-- ￥{{items.realAmount}} -->
							<!-- 	<text class="decimal">.58</text> -->
						</view>
						<view class="number">x{{items.productQuantity}}</view>
					</view>
				</view>
				<view class="total">
					<!-- 	共2件商品  -->
					合计:
					<text class="total-price">
						￥{{item.payAmount}}
						<!-- <text class="decimal">.58</text> -->
					</text>
				</view>
				<view class="bottom" v-if="item.status==0">
					<tui-button type="danger" plain width="152rpx" height="56rpx" :size="26" shape="circle" @click="pay(item.id)">立即付款</tui-button>
				</view>
				<view class="bottom" v-else-if="item.status==1">
					<view class="logistics btn" @click="to(item.id)">查看订单</view>
				</view>
				<view class="bottom" v-else-if="item.status==2">
					<view class="logistics btn" @click="to(item.id)">确认收货</view>
				</view>
				<view class="bottom" v-else-if="item.status==3">
					<view class="logistics btn" @click="del(item.id,i)">立即删除</view>
				</view>
				<view class="bottom" v-else-if="item.status==4||item.status==5">
					<view class="logistics btn" @click="del(item.id,i)">立即删除</view>
				</view>
			</view>
			<!--加载loadding-->
			<tui-loadmore v-if="loadding"></tui-loadmore>
			<tui-nomore v-if="!pullUpOn" backgroundColor="#f2f2f2"></tui-nomore>
			<!--加载loadding-->
		</view>
		<view v-else class="zz">
			<tui-no-data :fixed="false" imgUrl="/static/img/toast/img_noorder_3x.png">您还没有相关订单</tui-no-data>
		</view>
		<!-- 模态框 -->
		<u-modal v-model="del_show" content="是否删除商品？" :show-cancel-button="true" @confirm="delConfirm()"></u-modal>
		<!-- 提示框 -->
		<tui-toast ref="toast"></tui-toast>
		
		<failTimeout v-show="failTimeout"></failTimeout>
	</view>
</template>

<script>
	import OmsPortalOrderController from '../api/OmsPortalOrderController.js'
	export default {
		data() {
			return {
				failTimeout:false,
				pageNum: 0,
				list: [],
				loadding: false,
				pullUpOn: true,
				del_show: false,
				evaluate: false,
				delArray: {}
			};
		},
		props: {
			orderIndex: {
				type: String,
				default: '-1'
			}
		},
		async created() {
			await this.rendering()
		},
		methods: {
			async rendering() {
				if (this.pullUpOn) {
					this.loadding = true;
					this.pageNum++;
					await OmsPortalOrderController.list(this.pageNum, 10, this.orderIndex).then(res => {
						if (res.data.code == 200) {
							if (res.data.data.list != null && res.data.data.list != '' && res.data.data.list != 'undefined') {
								res.data.data.list.map(e => {
									e.orderItemList.map(es => {
										es.productAttrArray = JSON.parse(es.productAttr)
									})
									this.list.push(e)
								})
							}
							if (res.data.data.totalPage <= this.pageNum) {
								this.loadding = false;
								this.pullUpOn = false
							}
						}
					}).catch(err => {
						if(err.errMsg=='request:fail timeout'){
							this.failTimeout=true
						}
					})
				}

			},
			to(id) {
				uni.navigateTo({
					url: '/pages/order/orderDetails?orderId=' + id
				})
			},
			pay(id){
				uni.navigateTo({
					url:'/pages/pay/pay?orderId='+id
				})
			},
			del(id, index) { //删除
				this.delArray = {
					id,
					index
				}
				this.del_show = true;
			},
			delConfirm() { //确认删除
				OmsPortalOrderController.deleteOrder(this.delArray.id).then(res => {
					if (res.data.code == 200) {
						this.$refs.toast.show({
							title: "删除成功",
							imgUrl: "/static/img/toast/check-circle.png",
							icon: true
						})
						this.list.splice(this.delArray.index, 1)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toEvaluate(id) { //跳转商品评价
				uni.navigateTo({
					url: '/pages/productEvaluation/productEvaluation?orderId=' + id
				})
			}
		},

	}
</script>
<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
	.zz {
		margin-top: 200rpx;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;



		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
				margin-left: 20rpx;
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}
</style>
